<template>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <!-- @click="$router.push('/detail/'+ item.id)" -->
                <li v-for="item in list" :key="item.id" @click="$router.push(`/detail/${item.id}`)">
                    <div class="itemImg">
                        <img :src="item.image" alt="">
                    </div>
                    <div class="itemInfo">
                        <p>{{ item.title }}</p>
                        <p class="price">￥{{ item.price }}元</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>
<script setup>
import request from '@/utils/request.js'
import { onMounted, ref } from 'vue';
const list = ref([])
const loading = ref(false) // 是否处于加载状态
const finished = ref(false) // 是否已请求完成
const pagination = ref(1) // 页码
const isLoading = ref(false) // 下拉刷新组件： 是否处于加载状态
const onLoad = () => { // 上拉到滚动条距离底部300的时候触发这个函数
    // 1.展示loading
    loading.value = true
    // 2.请求数据
    request.get('/list', {
        params: {
            pagination: pagination.value,
            pageNum: 10
        }
    }).then(res => {
        if (res.data.code == 200) {
            // list.value = res.data.data
            // list.value = list.value.concat(res.data.data)
            // 3. 拼接数据
            list.value = [...list.value, ...res.data.data]
        }
        // 4.关闭loading
        loading.value = false
        // 5.页码+1
        pagination.value++
        // 6.判断是否还有数据
        if (list.value.length >= res.data.total) {
            // 当数组的长度大于等于模拟数据的总数时，说明加载完成 finished值设为true
            finished.value = true
        }
    })
}
const onRefresh = () => {
    // 展示loading
    isLoading.value = true
    setTimeout(() => {
        isLoading.value = false
    }, 1000)
}
// 生命周期请求数据
// onMounted(() => {
//     request.get('/list', {
//         params: {
//             pagination: 1,
//             pageNum: 30
//         }
//     }).then(res => {
//         if (res.data.code == 200) {
//             list.value = res.data.data
//         }
//     })
// })

</script>
<style lang="scss" scoped>
ul {
    column-count: 2;
    column-gap: 10px;

    li {
        /* 避免在元素内部换行 */
        break-inside: avoid;

        .itemImg {
            img {
                width: 100%;
            }
        }

        .itemInfo {
            padding: 2px 8px;

            .price {
                color: red;
            }
        }
    }
}
</style>